import { Tabs, Row, Col, Input, Select, Button, Form, Checkbox, Spin } from 'antd';
import React, { useEffect, useState, useMemo, useContext } from 'react';
import { usStates ,basePath} from '../../utils/tool';
import { request } from "../../utils/request";
import { PlusOutlined } from '@ant-design/icons';
export default function Address(props) {
  console.log('props', props.data)
  const [ship] = useState([]);
  const [curr] = useState(null);
  const [loading, setLoading] = useState(false);
  const [addressData, setAddress] = useState({});
  const [list, setList] = useState([]);
  const [addId, setAddId] = useState(null);
  console.log('process.env1', process.env.APIURL)
  const [form1] = Form.useForm();
  const [showForm,setShow] = useState(false)
  const [showList,setShowList] = useState(false)
  const [showBtn,setShowBtn] = useState(false)
  const onFinish = async (values) => {
    // const userId = ship[index].userId;


    values.stateName = usStates.find(item => item.STATE_CODE === values.stateCode).STATE_NAME
    values.type = 0;

    setLoading(true)
    const ret = addId ? await request(`${basePath()}/api/user/editshipaddr`, { ...values, id: addId }) : await request(`${basePath()}/api/user/addshipaddr`, values);
    if (ret.code === 100000) {
      setShow(false)
      getAddrList()
      props?.handleSave && props.handleSave()
    }
    setLoading(false)
  };
  const getAddrList = async () => {
    console.log('process', process.env.APIURL);
    const ret = await request(`${basePath()}/api/user/shipaddrlist`);
    if (ret.code === 100000) {
      setList(ret.data)
    } else {
      message.error('get bag list error')
    }
  }


  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const onState = (value) => {
    switch (value) {
      case 'male':
        return;
      case 'female':
        return;
      case 'other':
    }
  };
  const toEdit=(item)=>{
    setAddId(item.id)
    setShow(true)
    if(item.id){
      form1.setFieldsValue(item)
    }
  }
  useEffect(() => {
    getAddrList()
    if (props?.data?.id) {
      form1.setFieldsValue(props.data)
      setAddId(props?.data?.id)
    }
    props.showList && setShowList(true)
    props.showForm && setShow(true)
    props.showBtn && setShowBtn(true)
  }, [props.data])
  return (
    <Spin spinning={loading}>
      <div className='address'>
        {showList && <div>
        {
          list.map(item => {
            return (
              <div className="addr-list" key={item.id}>
                <div className='add-name'>
                  {item.firstName + ' ' + item.lastName}
                  <span className='btn-edit' onClick={() => toEdit(item)}>Edit</span>
                </div>
                <div className='add-content'>
                  {item.address}, {item.cityName},{item.stateName}
                </div>
                <div className='add-content'>
                  {item.phone}
                </div>
              </div>
            )
          })
        }
      
        </div>}
        {showBtn && <Button icon={<PlusOutlined />} onClick={() => setShow(true)}>Add a Shipping address</Button>}
       {showForm && <Form
          form={form1}
          name="basic"
          layout='vertical'
          labelCol={{
            span: 0,
          }}
          wrapperCol={{
            span: 24,
          }}

          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={addressData}
        >


          <Form.Item
            label="first name"
            name="firstName"
            rules={[{ required: true }]}

          >
            <Input placeholder="Input first name" />
          </Form.Item>
          <Form.Item
            label="last name"
            name="lastName"
            rules={[{ required: true }]}

          >
            <Input placeholder="Input last name" />
          </Form.Item>

          <Form.Item
            label="Phone number"
            name="phone"
            rules={[
              {
                required: true,
                message: 'Please enter your phone!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Address"
            name="address"
            rules={[
              {
                required: true,
                message: 'Please enter your address!',
              },
            ]}
          >
            <Input />
          </Form.Item>


          <Form.Item
            label="City"
            name="cityName"
            rules={[{ required: true }]}

          >
            <Input placeholder="Input city" />
          </Form.Item>
          <Form.Item
            name="stateCode"
            label="State"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="Select state"
              onChange={onState}
              allowClear
            >
              {
                usStates.map(item => {
                  return <Select.Option key={item.ID} value={item.STATE_CODE}>
                    {item.STATE_NAME}
                  </Select.Option>
                })
              }
            </Select>
          </Form.Item>
          <Form.Item
            label="Zip code"
            name="zipCode"
            rules={[{ required: true }]}
          >
            <Input placeholder="Input birth month" />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <div className="button">
              <Button htmlType="submit" type='primary'>
                Save
              </Button>
            </div>
          </Form.Item>
        </Form>}

      </div>
    </Spin>
  )
}